<template>
  <!-- 考核模板 -->
  <div class="flex_column">
    <search-section v-enter-search="() => { operate('search') }">
      <!-- 搜索查询 -->
      <div>
        <span>方案名称：</span>
        <el-input v-model="searchForm.name" clearable  class="my-search_datetime"  size="mini" placeholder="请输入模板名称" />
      </div>
			<div>
			  <span>方案状态：</span>
			  <el-select v-model="searchForm.assessStatus" class="my-search_datetime" filterable clearable multiple placeholder="请选择方案状态">
			  	<el-option v-for="(item,idx) in planStatusList" :key="idx" :label="item.label" :value="item.value" />
			  </el-select>
			</div>
      <div>
        <span>考核月份：</span>
        <el-date-picker
        			class="my-search_datetime" 
              v-model="searchForm.assessMonth"
              type="month"
        			value-format="yyyy-MM"
              placeholder="选择考核月份">
            </el-date-picker>
      </div>
      <div slot="button">
        <el-button size="mini" @click="operate('reset')">重置</el-button>
        <el-button size="mini" type="primary" @click="operate('search')">搜索</el-button>
        <el-button size="mini" type="primary" plain @click="operate('add')">添加</el-button>
      </div>
    </search-section>
    <!-- 列表信息 -->
    <div class="main flex_1_auto" >
      <div class="flex_row" style="flex-wrap: wrap;justify-content: flex-start;align-items: auto;padding: 5px;">
				<el-card class="box-card"  v-for="(item,idx) in tableList" :key="idx" @click.native="selectCard(idx,item)"  >
				  <div class="title" >
						<!-- <div>{{new Date(item.assessMonth).getFullYear()}}年</div> -->
						<div>{{item.assessMonth}}</div>
						<div>{{item.name}}</div>
						<div>{{item.code}}</div>
					</div>
				  <div class="footer">
						<div>
							状态：
							<span class="tag_primary">{{item.assessStatusName}}</span>
							<span class="autoTime" v-if="item.autoTime&&!item.isAuto">{{item.autoTime}}定时发起</span>
						</div>
						<div style="display: flex;align-items: center;margin: 4px 0;">
							<div>参与人数：</div>
							<el-tooltip :content="item.carryOutNames" placement="top">
							  <div class="num">{{parseFloat(item.quantity)}}</div>
							</el-tooltip>
						</div>
						<div>考核月份：{{item.assessMonth}}</div>
						<div>创建时间：{{item.createTime}}</div>
						<div>修改时间：{{item.lastUpdateTime}}</div>
						<div>创建人员：{{item.creatorName}}</div>
						<div class="del">
							<i class="el-icon-caret-right icon_normal"  style="font-size: 24px;" title="开始执行" v-if="item.assessStatus=='A'" @click.stop="operate('start',item)" />
							<i class="iconfont icon_error icon-a-shanchu" title="删除" @click.stop="operate('del',item)" />
						</div>
					</div>
				</el-card>
			</div>
    </div>
    <!-- 分页查询 -->
    <div class="paging">
      <el-pagination :current-page="searchForm.page" :page-sizes="$paginationSize" :page-size="searchForm.size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    
  </div>
</template>
<script>
import { getNowDateYM } from '@/assets/js/time.js'
export default {
	name:'assessmentPlan',
	components: {
	},
  data() {
    return {
			planStatusList:[], // 方案状态下拉框
			tableList: [], // 指标库列表
				searchForm: {
					assessMonth:getNowDateYM(new Date()),
					current: 1,
					size: this.$defaultPage,
					name: '', // 方案名称
				},
				total: 0,
				title: '',
				detailsUrl:'/performanceSystem/assessmentManagement/planDetails'
    }
  },
	beforeRouteLeave(to, from, next) {
		if(!to.meta.isTagOpen){
			to.meta.tagOpenCount ++
		}
		
	  next();
	},
  created() {
		this.planStatusList=[]
		Object.keys(this.$store.getters.assessmentPlanStatus).forEach(key => {
			this.planStatusList.push({
				label: this.$store.getters.assessmentPlanStatus[key],
				value: key
			})
		})
		this.searchForm.flag=!this.$jurisdiction('lypc_jx_searchAll')
		this.getData()
  },
  methods: {
		// 新增/编辑 跳转地址
		goPage(query){
			this.$store.dispatch('delKeepViews','planDetails')
			this.$store.dispatch('delVisitedViews', {path:this.detailsUrl})
			setTimeout(()=>{
				this.$goPage({ path: this.detailsUrl, query})
			},100)
		},
		// 选择卡片
		selectCard(idx, data) {
			if (this.isCheckDialog) {
				this.active = idx
				this.$emit('selectCard',data)
			} else {
				this.goPage({code: data.code})
			}
		},
		// 获取列表数据
		async getData() {
			let res = await this.$API.assessOption.reqPage(this.searchForm)
			let {
				code,
				responseBody
			} = res
			if (code == 0) {
				this.tableList = responseBody.records || []
				this.total = Number(responseBody.total)
			} else {
				this.$message.error(res.masg)
			}
		},
    // 内部方法
    async operate(type, item) {
      switch (type) {
        case 'reset':
        // 重置
          this.searchForm = this.$options.data.call(this).searchForm
          // this.searchForm.ownerId = ''
          this.getData()
          break
        case 'search':
          this.searchForm.current = 1
          this.getData()
          break
				case 'add':
					this.goPage()
					break
        case 'del':
          this.$confirm('是否确定删除？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: '',
            customClass: 'my_confirm'
          }).then(() => {
            this.delete(item)
          })
          break
        case 'start':
          this.$confirm('是否确定开始执行方案？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: '',
            customClass: 'my_confirm'
          }).then(() => {
            this.start(item)
          })
          break
      }
    },
		// 删除
		async delete(item) {
			console.log(item)
			let res = await this.$API.assessOption.reqDelete(item.code)
			if (res && res.code == 0) {
				this.$message.success('操作成功！')
				this.getData()
			} else {
				this.$message.error(res.message)
			}
		},
		// 执行方案
		async start(item) {
			console.log(item)
			let res = await this.$API.assessOption.reqInitiateApproval(item.code)
			if (res && res.code == 0) {
				this.$message.success('操作成功！')
				this.getData()
			} else {
				this.$message.error(res.message)
			}
		},
    // 分页查询
    handleSizeChange(val) {
      this.searchForm.current = 1
      this.searchForm.size = val
      this.searchOne(this.searchForm)
    },
    handleCurrentChange(val) {
      this.searchForm.current = val
      this.searchOne(this.searchForm)
    },
    getIndex(index) {
      return (
        (this.searchForm.current - 1) * this.searchForm.size + index + 1
      )
    }
  }
}
</script>

<style lang="scss" scoped>
  .main {
    margin-bottom: 10px;
    ::v-deep th {
      height: 20px;
      padding: 1px;
    }
  }

  .dialog-box{
    padding:10px;
	margin-top: 20px;
  }
  .ann_input{
  	width: 300px;
  }
	.box-card {
		  cursor: pointer;
			margin: 5px;
			padding: 6px;
			min-width: 280px;
			width: calc((100% - 120px) / 5);
			@media  screen and (max-width : 1800px) {
				width: calc((100% - 96px) / 4);
			}
			@media  screen and (max-width : 1450px) {
				width: calc((100% - 72px) / 3);
			}
			@media  screen and (max-width : 1200px) {
				width: calc((100% - 48px) / 2);
			}
			@media  screen and (max-width : 800px) {
				width: 100%;
			}
			.title{
				color: #636363;
				font-size: 16px;
				div:nth-child(2){
					font-weight: bold;
					font-size: 15px;
				}
				div:nth-child(3){
					font-size: 11px;
				}
			}
			.footer{
				position: relative;
				margin-top: 20px;
				font-size: 11px;
				color: #c1c1c1;
				.num{
					font-size: 18px;
					font-weight: bold;
					color:#409EFF;
				}
			}
			.del{
				position: absolute;
				right: 0;
				bottom: 0;
				display: flex;
				align-items: cener;
			}
	  }
.autoTime{
	color:red;
	margin-left: 5px;
	font-weight: bold;
}
</style>
